/*
 * @Description: layer.js
 * @Author: zhangchenna
 * @Date: 2019-01-08 19:52:02
 * @LastEditTime: 2019-03-05 16:33:26
 */
import Common from '../../utils/common';
import './layer.scss';

let common = new Common();

export default class layer {
    /**
     * @description: 弹窗调用方法
     * @param {type string} name 包裹类名
     * @param {type string} slot 弹出层的内容
     * @param {type string} className 弹窗约束类名 默认为空
     * @return: void
     */
    static fn(name, slot, className = '') {
        let html =
            '<div class="modal-alert"><div class="modal-alert-bg"/><div class="modal-alert-modal" /></div>';
        document.querySelector(`.${name}`).innerHTML = html;
        document.querySelector(`.${name} .modal-alert-modal`).innerHTML = slot;
        document.querySelector(`.${name} .modal-alert-modal`).classList.add(className);
        document.querySelector(`.${name}`).classList.remove('mit-hide');
        common.modalHelperOpen();
        let close = () => {
            this.close(name);
        };
        document.querySelector('.modal-alert-bg').addEventListener('click', close, false);
        document.querySelector('.modal-alert-modal').addEventListener(
            'click',
            function(e) {
                e.stopPropagation();
            },
            false
        );
    }
    /**
     * @description:
     * @param {type string} name 包裹类名
     * @return: void
     */
    static close(name) {
        common.modalHelperClose();
        document.querySelector(`.${name}`).classList.add('mit-hide');
    }
}
